查看原文
其他

从0搭建在线聊天室,只需4步!

网易云信 网易云信 2021-09-19

Vol. 5

聊天室不同于单聊和群聊,是一类集成了多种 IM 功能一体的大规模实时消息分发系统。在跨入新世纪的2000年,聊天室作为新型的即时通讯场景迅速在年轻人群体中火热起来,“网易聊天室”“碧海银沙”引领了当时语音聊天的热潮。


时至今日,聊天室的势头也不减当年,广泛运用于在线 KTV 、连麦开黑、主播 PK 、在线秀场等场景,还具备文本、表情、点赞、撒花等互动方式,架起沟通桥梁的同时,玩法也更加多变


本期云信小课堂就教大家如何快速集成聊天室,并实现进出聊天室、简单的消息收发、权限管理等功能。


视频讲解


8分钟视频,手把手教你接入


集成聊天室-基础篇


 Step 1 初始化并进入聊天室


进入聊天室可以有两种方式:以独立模式进入聊天室和非独立模式进入聊天室。
  • 独立模式是指在 IM 处于未登录的情况下,进入聊天室的方式,针对只需要聊天室功能的业务场景。请引入 NIM_Web_Chatroom_*.js ,并通过 Chatroom.getInstance({...}) 来初始化聊天室实例。
  • 非独立模式是指先完成 IM 登录,再进入聊天室的方式,针对需要 IM 和聊天室功能的业务场景。请引入 NIM_Web_SDK_*.js ,并请通过  SDK.NIM.getInstance({...}) 和 SDK.Chatroom.getInstance({...}) 来分别初始化 IM 和聊天室的实例。


这里为了方便演示,选择独立模式:


//引入SDK,import/require引入的方式可以参考官方文档<script src="NIM_Web_Chatroom_*.js">
// 非匿名方式登录(可以演示收发消息);//此接口为单例模式, 对于同一个账号, 永远返回同一份实例, 即只有第一次调用会初始化一个实例var chatroom = Chatroom.getInstance({ appKey: 'appKey', //在云信管理后台查看应用的 appKey account: 'account', //帐号,应用内唯一 token: 'token', //通过服务器API创建IM账号时获取 chatroomId: 'chatroomId', //聊天室 id,通过服务端API https://api.netease.im/nimserver/chatroom/create.action创建 chatroomAddresses: [ //聊天室地址,通过服务端API https://api.netease.im/nimserver/chatroom/requestAddr.action 获取 'address1', 'address2' ], onconnect: onChatroomConnect, onerror: onChatroomError, onwillreconnect: onChatroomWillReconnect, ondisconnect: onChatroomDisconnect, // 收到消息的回调, 会传入消息数组,这个会是高频使用的回调 onmsgs: onChatroomMsgs});function onChatroomConnect(obj) { console.log('进入聊天室', obj); // 连接建立后的回调,表示已成功进入聊天室,这个时候才能去发消息}function onChatroomWillReconnect(obj) { // 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接 console.log('即将重连', obj);}function onChatroomDisconnect(error) { // 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面 console.log('连接断开', error); if (error) { switch (error.code) { // 账号或者密码错误, 请跳转到登录页面并提示错误 case 302: break; // 被踢, 请提示错误后跳转到登录页面 case 'kicked': break; default: break; } }}function onChatroomError(error, obj) { console.log('发生错误', error, obj);}function onChatroomMsgs(msgs) { console.log('收到聊天室消息', msgs);}


 Step 2 收发消息


进入聊天室成功后才能发送/接受消息:


//发送消息var msg = chatroom.sendText({ text: 'hello', done: sendChatroomMsgDone});console.log('正在发送聊天室text消息, id=' + msg.idClient);function sendChatroomMsgDone(error, msg) { console.log('发送聊天室' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient, error, msg); //发送成功后,聊天室其他人会收到onmsgs的回调;}

//接收普通消息和通知消息,通过初始化时注册的回调onmsgs来接收消息function onChatroomMsgs(msgs) { console.log('收到聊天室消息', msgs);}


Step 3 权限管理


聊天室成员管理和聊天室信息查询:


//设置管理员权限,只有聊天室创建者才有权限var Manager = chatroom.markChatroomManager({ account: 'account', //需要设置为管理员的accid isAdd: true, done: markChatroomManagerDone});function markChatroomManagerDone(error, obj) { console.log('添加聊天室管理员' + (!error?'成功':'失败'), error, obj.member);}

//设置禁言,只有管理员和聊天室创建者有这个权限var Gaglist = chatroom.markChatroomGaglist({ account: 'account',//需要禁言的accid isAdd: true, done: markChatroomGaglistDone});function markChatroomGaglistDone(error, obj) { console.log('添加聊天室禁言名单' + (!error?'成功':'失败'), error, obj.member);}

//设置黑名单,只有管理员和聊天室创建者有这个权限var Blacklist = chatroom.markChatroomBlacklist({ account: 'account', //需要拉黑的accid isAdd: true, done: markChatroomBlacklistDone});function markChatroomBlacklistDone(error, obj) { console.log('添加聊天室黑名单' + (!error?'成功':'失败'), error, obj.member);}

//聊天室信息查询,可以查询到当前聊天室在线人数onlineMemberNumvar roomInfo = chatroom.getChatroom({ done: getChatroomDone});function getChatroomDone(error, obj) { console.log('获取聊天室信息' + (!error?'成功':'失败'), error, obj);}


 Step 4 离开聊天室


离开或切换聊天室:


// 离开聊天室,在收到进入聊天室成功的回调后就可以调用disconnect来退出聊天室chatroom.disconnect()

// 切换聊天室,先断开聊天室再更新token然后重新连接chatroom.disconnect() //断开聊天室chatroom.setOptions({ // 更新 token,参数列表和格式跟Chatroom.getInstance保持一致 token: 'newToken'});chatroom.connect() // 重新连接


集成聊天室-Demo篇

 Step 1 下载 Demo


Demo 链接:

https://github.com/netease-kit/NIM_Web_Demo,下载到本地,解压后通过 IDE 打开,下载期间,率先获取 APP_KEY ;



如何获取 APP_KEY ?


如果已经是网易云信开发者,可以直接从网易云信的控制后台获取 APP_KEY ;

如果是第一次体验,则需要前往网易云信官网(http://163.lu/f04GM3)注册云信账号-创建应用-点击 App_Key 管理即可获取相关信息。



 Step 2 运行 Demo


在 

NIM_Web_Demo-master\webdemo\imNew\js\config.js 

里面输入对应环境的 APP_KEY ,然后在 Demo 根目录下执行 npm install 和 node app命令。





 Step 3 体验 Demo 功能


打开

http://127.0.0.1:8182/webdemo/imNew/index.html

体验 Demo 功能(建议先登录账号);




Demo 中实现收发消息、禁言、拉黑等相关功能的代码在 NIM_Web_Demo-master\webdemo\imNew\chatroom\src\js\link.js 和 room.js 里面,大家可以参考 API 文档自行补充更多功能。



总结


以上就是网易云信聊天室解决方案 Demo Web 端接入流程的详细解说,按照如上步骤就可以轻松完成聊天室的搭建。


任何系统的搭建都不是一蹴而就的,尤其是对于娱乐社交产品而言,自研搭建聊天室意味着较高的人力成本、时间成本和资金成本。而融合通信云服务专家网易云信所提供的聊天室解决方案,可实现快速上线,1天即可完成集成工作,轻松应对亿级日活的高并发场景。网易云信也会继续打磨底层技术能力、为开发者提供更多简单集成,快速接入的音视频和即时通讯解决方案。


如果感兴趣或者有需求的开发者可以阅读《技术干货|网易云信大规模聊天室系统架构解析》,或点击阅读原文,免费试用。



云信小课堂推荐阅读


第一期:如何实现音视频通话

第二期:5步构建本土「Clubhouse」

第三期:5分钟实现安卓端PK连麦场景

第四期:5分钟快速实现iOS端PK连麦场景


关于网易云信

网易云信是集网易21年IM以及音视频技术打造的融合通信云服务专家,稳定易用的通信与视频 PaaS 平台。


提供融合通信与视频的核心能力与组件,包含 IM 即时通讯、5G 消息平台、一键登录、信令、短信与号码隐私保护等通信服务,音视频通话、直播、点播、互动直播与互动白板等音视频服务,视频会议等组件服务


网易云信服务于网易云音乐、好未来、新东方、科大讯飞、南京银行等各行各业客户,已有100w+ 企业开发者接入云信服务。





: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存